<template>
    <div class="courseIntroduction" >
        <div class="course-1">
            <div class="title">
                <p>
                    实  战  推  荐
                </p>
            </div>
            <div class="course-card-container">
                <dl v-for="i in 10">
                    <a :href="handleAudit('A')" target="_blank">
                        <dt>
                            <img src="../../../assets/img/img.jpg" alt="">
                            <div class="course-label">
                                <label>Java</label>
                                <label>Linux</label>
                            </div>
                        </dt>
                    </a>
                    <dd>
                        <h3>360大牛全面解读PHP面试</h3>
                        <span>实战</span>
                        <span>中级</span>
                        <span class="iconfont">&#xe60a; 2200</span>
                        <span>
                            <b class="iconfont1">&#xe7b9;</b>
                            <b class="iconfont1">&#xe7b9;</b>
                            <b class="iconfont1">&#xe7b9;</b>
                            <b class="iconfont1">&#xe7b9;</b>
                            <b class="iconfont1">&#xe7b9;</b>
                        </span>
                        <div style="clear:both" class="red">￥666.00</div>
                    </dd>
                </dl>
            </div>
            <div class="course-card-container">
                <dl v-for="i in 10">
                    <dt>
                        <img src="../../../assets/img/img.jpg" alt="">
                        <div class="course-label">
                            <label>Java</label>
                            <label>Linux</label>
                        </div>
                    </dt>
                    <dd>
                        <h3>360大牛全面解读PHP面试</h3>
                        <span>实战</span>
                        <span>中级</span>
                        <span class="iconfont">&#xe60a; 2200</span>
                        <span>
                            <b class="iconfont1">&#xe7b9;</b>
                            <b class="iconfont1">&#xe7b9;</b>
                            <b class="iconfont1">&#xe7b9;</b>
                            <b class="iconfont1">&#xe7b9;</b>
                            <b class="iconfont1">&#xe7b9;</b>
                        </span>
                        <div style="clear:both" class="red">￥666.00</div>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'courseIntroduction',
        methods:{
            handleAudit(a){
                 return `#/homePage/videoPlay`;
            },
        }
    }
</script>

<style lang="less">
    .courseIntroduction{

       width:1150px;

       overflow: hidden;
        margin:30px auto;
        .title{
            p{
                width: 100%;
                text-align:center;
                margin: 10px 0;
                img{
                    width:20px;
                }
            }
            font-size: 20px;
            font-weight: 600;
            color: #4D555D;
            margin: 0 3px;
        }
        .course-card-container{
            width:1166px;
            dl{
                width: 216px;
                float: left;
                margin-right: 17px; 
                &:hover h3{
                    color:red;
                }
            }
            dt{
                width: 216px;
                height: 120px;
                position: relative;
                border-radius: 8px;
                transition: all .3s;
                img{
                    width: 100%;
                    height: 100%;
                    background-color: #f3f5f7;
                    border-radius: 8px;
                }
                div{
                    position: absolute;
                    bottom: 6px;
                    left: 8px;
                    font-size: 12px;
                    color: #FFF;
                    line-height: 16px;
                    label{
                        display: inline-block;
                        background: rgba(7,17,27,.4);
                        border-radius: 12px;
                        padding: 4px 8px;
                        margin-bottom: 2px;
                        margin-right: 0;
                        font-weight: 200;
                    }
                }
            }
            dd{
                margin:0;
                h3{
                    font-size: 16px;
                    color: #07111B;
                    line-height: 24px;
                    word-wrap: break-word;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    max-height: 44px;
                    transition: all .3s;
                    margin-top:10px;
                }
                span{

                    margin-right: 10px;
                    float: left;
                    font-size: 12px;
                    color: #93999F;
                    line-height: 35px;
                    font-weight: 200;
                }
            }
        }
        .iconfont{
              display: inline-block;
              font-family:"iconfont";
              color:#707070;
              font-size: 12px;
              vertical-align: sub;
              margin-left:5px;
              cursor: pointer;
        }
        .iconfont1{
              
              font-family:"iconfont";
              color:#f5ae37;
         
        }
    }
</style>
